<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="订单列表"></com-nav-bar>
			
			<!-- 关键字搜索框 -->
			<view class="tui-searchbox">
				<view class="tui-search-input">
					<view>
						<com-icons type="search" :size='16' color='#333333'></com-icons>
					</view>
					<input type="search" placeholder="请输入商品名"  placeholder-class="tui-input-plholder" class="tui-input" v-model.trim="searchForm.keyword" @confirm='searchHandler'/>
					<view @tap="searchForm.keyword = ''" v-show="searchForm.keyword">
						<tui-icon name="close-fill" :size='16' color='#bcbcbc'></tui-icon>
					</view>
				</view>
				<view class="tui-cancle" @tap="searchHandler">搜索</view>
			</view>
			
			<u-tabs :list="statusOptions" :is-scroll="false" :current="currentIndex" @change="statusChange" active-color="#ff9900"></u-tabs>
		</view>
		
		<view :style="{marginTop:fixedTopHeight+'px'}" style="padding: 20rpx;min-height: 100vh;">
			<view v-if="dataList.length > 0" v-for="(item,index) in dataList" :key="index" style="padding: 20rpx;background-color: #fff;border-radius: 10rpx;margin-bottom: 20rpx;" @click="openUrl('/pages/order/order_detail?order_no='+item.order_no)">
				
				<!-- 订单店铺和状态信息 -->
				<view style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;">
					<view style="display: flex;flex-grow: 1;">
						<image style="width: 40rpx;height: 40rpx;margin-right: 30rpx;flex-shrink:0;" :src="item.mall_logo"></image>
						<view style="flex-grow: 1;">{{item.mall_name}}</view>
					</view>
					<view style="flex-shrink:0;width: 150rpx;text-align: right;font-size: 10pt;color:#FF7104">{{item.status | orderStatusDesc}}</view>
				</view>
				
				<!-- 订单商品信息 -->
				<view style="display: flex;padding: 20rpx 0;" v-for="(itm,idx) in item.details" :key="idx">
					<image style="width: 200rpx;height: 200rpx;margin-right: 20rpx;flex-shrink:0;" lazy-load="true" :src="jsonFormat(itm.extend).cover_pic"></image>
					<view style="height:200rpx;display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;">
						<view v-line-clamp='1' style="font-size: 28rpx;height: 28rpx;line-height: 28rpx;">{{jsonFormat(itm.extend).goods_name}}</view>
						<view v-line-clamp='1' style="font-size: 10pt;color: #909399;">{{jsonFormat(itm.extend).attr_str}}</view>
						<view style="font-size: 10pt;">
							<text>单价：</text>
							<text style="text-decoration: line-through;font-size: 9pt;color:#909399">￥{{jsonFormat(itm.extend).original_price}}</text>
							<text style="font-weight: 600;">￥{{itm.unit_price}}</text>
						</view>
						<view style="font-size: 12pt;">
							<text style="font-weight: 600;margin-right: 20rpx;">x{{itm.goods_num}}</text>
							<text style="color:red;font-size: 10pt;">小计：{{itm.price}}</text>
						</view>
					</view>
				</view>
				
				<!-- 订单实付金额时间等信息 -->
				<view style="font-size: 10pt;display: flex;align-items: center;justify-content:flex-end;padding: 20rpx 0;">
					共{{item.details.length}}款产品，合计：
					<text style="font-weight: 600;font-size: 14pt;color: red;">￥{{item.pay_price}}</text>
				</view>
				
				<view style="font-size: 9pt;">{{formatTimeToStr(item.created_at)}}</view>
				<view style="display: flex;align-items: center;justify-content: flex-end;">
					<u-button type="warning" plain v-if="item.status == 0" size="mini" shape="circle" style="margin: 10rpx;" @click="orderPayment(item.id)">去付款</u-button>
					<u-button type="warning" plain v-if="item.status >= 20 && item.status < 30" size="mini" shape="circle" style="margin: 10rpx;" @click="orderCancel(item.id)">确认收货</u-button>
					<u-button type="warning" plain v-if="item.status == 0" size="mini" shape="circle" style="margin: 10rpx;" @click="orderConfirm(item.id)">取消订单</u-button>	
				</view>
			</view>
			<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
		</view>
		
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon";
	import {formatTimeToStr} from "@/utils/date";
	let that;
	export default {
		data(){
			return {
				fixedTopHeight:0,
				searchForm:{
					status: '',
					keyword:''
				},
				statusOptions:[
					{name: '全部',value:''},
					{name: '待付款',value:'0'},
					{name: '待发货',value:'10'},
					{name:'待收货',value:'30'},
					{name:'已完成',value:'40'},
					{name:'售后',value:'20'}
				],
				currentIndex:'',
				loadStatus:'nomore',
				dataList:[],
				pagination:{
					page_count:0,
					current_page:1,
					total_count:0,
				},
			}
		},
		components:{
			tuiIcon
		},
		beforeCreate(){
			that = this;
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		onLoad(opt){
			this.searchForm.status = opt.status ?? '';
			if(this.searchForm.status){
				this.currentIndex = this.statusOptions.findIndex(item => {
					return item.value == this.searchForm.status
				});
			}
			
			
			this.getOrderLst()
		},
		computed: {
			jsonFormat(){
				return data => {
					if( typeof data == 'string'){
						data = JSON.parse(data);
					}
					return data ?? {};
				}
			},
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			},
		},
		filters:{
			orderStatusDesc(type){
				const orderStatusMaps = {
					'0': '未付款',
					'10': '待发货',
					'30': '待收货',
					'40': '已收货',
					'100': '已完成',
					'-1': '已取消',
					'5': '取消中'
				}
				return orderStatusMaps[type] ?? '未知';
			}
		},
		methods:{
			back(){
				this.navBack();
			},
			openUrl(url){
				uni.navigateTo({url})
			},
			searchHandler(){
				this.initData()
				this.getOrderLst()
			},
			statusChange(index){
				this.currentIndex = index;
				this.searchForm.status = this.statusOptions[index].value;
				this.initData();
				this.getOrderLst();
			},
			
			initData(){
				this.dataList = [];
				this.pagination = {
					page_count:0,
					current_page:1,
					total_count:0,
				};
			},
			
			//获取订单列表
			async getOrderLst(){
				this.loadStatus = 'loading';
				let { current_page, pageSize } = this.pagination;
				
				let res = await this.$http.request({
					url: this.$api.v2Order.orderLst,
					method: 'POST',
					data: {page: current_page,...this.searchForm},
					showLoading:true
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				let { list, pagination } = res.data;
				this.dataList = this.dataList.concat(list);
				this.pagination = pagination;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getOrderLst();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getOrderLst();
		}
	}
</script>

<style lang="scss">
	.tui-searchbox {
		width: 100%;
		padding: 30rpx;
		background: #fff;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 11pt;
	}
	.tui-search-input {
		width: 90%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	.tui-cancle {
		color: #888;
		font-size: 11pt;
		padding-left: 30rpx;
		flex-shrink: 0;
	}
	
	.btn-style{
		border-radius: 10rpx;
		font-size: 28rpx;
		padding: 4rpx 24rpx;
		margin: 10rpx;
	}
</style>